<template>
    <el-dialog
            title="列表配置"
            width="500px"
            :visible.sync="dialogVisible">
        <el-form ref="deviceForm" label-width="70px">
            <el-form-item label="展示的列" prop="key">
                <el-checkbox-group v-model="columnConfig" @change="applyConfig">
                    <el-checkbox
                            v-for="option in columns"
                            :key="option"
                            :label="option">
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
<!--                <el-button size="mini" @click="dialogVisible = false">取 消</el-button>-->
                <el-button size="mini" type="primary" @click="dialogVisible = false">确 定</el-button>
              </span>
    </el-dialog>
</template>

<script>
import {getStorage, setStorage} from '@/utils/storage'
export default {
  name: 'columnConfig',
  props: {
    pageKey: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      columnConfig: [],
      columns: [],
      hideColumns: []
    }
  },
  methods: {
    open(data) {
      this.dialogVisible = true
      this.columns = [...data]
      this.columnConfig = getStorage(this.pageKey) || [...data]
    },
    applyConfig() {
      setStorage(this.pageKey, this.columnConfig)
      this.$emit('onSure', this.columnConfig)
    }
  }
}
</script>

<style scoped>

</style>